<template>
  <div class="nav-right">
    <div class="download">
      <span class="download-logo"></span>
      <span class="download-text">打开<br />客户端</span>
      <div class="delimiter"></div>
    </div>
    <div class="menu">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scope>
.nav-right {
  display: flex;
  align-items: center;
  .download {
    display: flex;
    align-items: center;
    .download-logo {
      width: 0.48rem;
      height: 0.48rem;
      background: url(/img/logo1.png) no-repeat 50%;
      background-size: contain;
    }
    .download-text {
      width: 0.74rem;
      font-size: 0.24rem;
      line-height: 0.28rem;
      margin-left: 0.08rem;
      color: #fff;
    }
    .delimiter {
      display: inline-block;
      width: 0.02rem;
      height: 0.64rem;
      margin-left: 0.12rem;
      margin-right: 0.2rem;
      background: #fff;
      transform: scaleX(0.5);
    }
  }
  .menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 0.28rem;
    height: 0.28rem;
    span {
      display: block;
      width: 0.28rem;
      height: 0.04rem;
      background: #fff;
      box-sizing: border-box;
    }
    span:nth-child(2) {
      background-color: var(--secondary-color, #ffe100);
    }
  }
}
</style>
